<mat-toolbar
  [color]="toolbarColor"
  class="td-window-dialog-toolbar"
  [style.min-height.px]="toolbarHeight"
  [style.cursor]="docked ? 'inherit' : 'move'"
>
  <mat-toolbar-row [style.height.px]="toolbarHeight">
    <div layout="row" layout-align="start center" flex>
      <span class="mat-title td-window-dialog-title truncate" flex>
        {{ title }}
      </span>

      <button
        mat-icon-button
        [matTooltip]="toggleDockedStateLabel ?? ''"
        (click)="toggleDockedState()"
      >
        <mat-icon [attr.aria-label]="toggleDockedStateLabel"
          >dock_to_right</mat-icon
        >
      </button>

      <button
        mat-icon-button
        [matTooltip]="closeLabel ?? ''"
        (click)="closed.emit()"
        class="td-window-dialog-close"
        [attr.data-test]="'close-button'"
      >
        <mat-icon [attr.aria-label]="closeLabel">close</mat-icon>
      </button>
    </div>
  </mat-toolbar-row>
</mat-toolbar>
<ng-content></ng-content>
